<template>
  <div class="home" style="width: 100%;height:100%;">
    <Dingbu :nameTitle="PageName"></Dingbu>
    <div class="content">
        <div class="top">
          <Button>全部</Button>
          <Button>本周</Button>
          <Button>本月</Button>
          <DatePicker type="daterange" split-panels placeholder="选择日期" style="width: 200px"></DatePicker>
          <Button style="float: right;">导出数据</Button>
        </div>
        <!-- //用户总览 -->
        <div class="content-one">
          <div class="title">用户总览</div>
          <div class="yhzl">
              <ul>
                <li class="red">100</li>
                <li>今日新增</li>
              </ul>
              <ul>
                <li class="red">200</li>
                <li>昨日新增</li>
              </ul>
              <ul>
                <li class="red">1000</li>
                <li>本月新增</li>
              </ul>
              <ul>
                <li class="red">5000</li>
                <li>用户总数</li>
              </ul>
          </div>
        </div>
        <!-- 新增用户数 -->
        <div class="content-two">
            <div class="title">用户统计</div>
            <div id="myChart" style="width:96%;height:550px;"></div>
        </div>
        <!-- 用户排行 -->
        <div class="content-three">
            <div class="title">用户排行</div>
            <div class="table">
                <Table :columns="columns" :data="tabledata"></Table>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import Dingbu from "../header/dingbu.vue";
import { mapGetters, mapMutations, mapActions } from "vuex";
var yarr1 = ['0', '50', '100', '150', '200', '250', '300'];
var yarr2 = ['0', '05', '100', '150', '200', '250', '300'];
var xarr3 = ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07']
export default {
  data() {
    return {
      PageName: "用户统计",
      columns:[
            {
                title:'排名',
                type: 'index',
                width: 60,
                align: 'center'
            },
            {
                title:'用户昵称',
                key:'name',
                align: 'center'
            },
            {
                title:'订单数(单位:个)',
                key:'num',
                align: 'center'
            },
            {
                title:'消费金额',
                key:'price',
                align: 'center'
            }
      ],
      tabledata:[
          
      ]
    };
  },
  mounted() {
    var that = this
    this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: {
                text: '用户统计',
                subtext: '数据走势图',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            // 图例组件
            legend : {

                bottom: 0,
                data: [
                    {
                        name: '用户总数',
                        icon: 'rect',
                        textStyle: {
                            color: '#009688'
                        }
                    },
                    {
                        name: '新增用户数',
                        icon: 'rect',
                        textStyle: {
                            color: '#2D8CF0'
                        }
                    }
                ]
            },
            // 工具栏
            // toolbox: {
            //     show: true,
            //     feature: {
            //         saveAsImage: {},
            //     }
            // },
            // x坐标
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: xarr3
            },
            // y坐标
            yAxis: [
                {
                    name: '用户总数',
                    type: 'value',
                    position: 'left',
                    splitNumber: 10,
                    axisLabel: {
                        formatter: yarr1
                    },
                    axisPointer: {
                        snap: true
                    }
                },
                {
                    name: '新增用户数',
                    type: 'value',
                    position: 'right',
                    splitNumber: 10,
                    axisLabel: {
                        formatter: yarr2
                    },
                    axisPointer: {
                        snap: true
                    }
                }
            ],
            // 系列列表
            series: [
                {
                    name:'用户总数',
                    type:'line',
                    yAxisIndex: 0,
                    data: [160, 150, 170, 210, 230, 260, 280],
                    color: ['#009688'],
                    // 标记线
                    markLine: {  
                        data: [  
                            {type: 'average', name: '平均值'}  
                        ]  
                    }  
                },
                {
                    name:'新增用户数',
                    type:'line',
                    yAxisIndex: 1,
                    data: [25, 23, 20, 25, 10, 20, 25],
                    color: ['#2D8CF0'],
                    // 标记线
                    markLine: {  
                        data: [  
                            {type: 'average', name: '平均值'}  
                        ]  
                    }  
                }
            ]
        })
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    })
   
  },
  components: {
    Dingbu
  },
  methods: {
    ...mapActions(["checkAccountsIndex"]),
  },
  created() {
      this.$store.dispatch("checkAccountsIndex", "userAccount")
  }
};
</script>
<style lang="scss" scoped>
@import "../../css/common.scss";
.content {
  width:95%;
  margin: 20px auto 0;
  >.content-one {
    margin-top:20px;
    background: #fff;
    box-shadow: 1px 1px 2px 2px #e6e6e6;
    border-radius: 6px;
    >.title {
      font-size: 16px;
      color: #666666;
      font-weight:bolder;
      padding: 10px 0;
      padding-left: 15px;
      border-bottom: 1px solid #1ABC9C;
    }
    >.yhzl {
      display: flex;
      justify-content: space-around;
      padding: 30px 0;
      >ul {
        text-align: center;
        >li {
          font-size: 20px;
          color:#666666;
        }
        .red {
          font-size: 25px;
          color: red;
        }
      }
    }
  }
  >.content-two{
    margin-top:20px;
    background: #fff;
    box-shadow: 1px 1px 2px 2px #e6e6e6;
    border-radius: 6px;
    padding-bottom: 20px;
    >.title {
      font-size: 16px;
      color: #666666;
      font-weight:bolder;
      padding: 10px 0;
      padding-left: 15px;
      border-bottom: 1px solid #1ABC9C;
    }
    >#myChart {
        
    }
  }
  >.content-three{
    margin-top:20px;
    margin-bottom: 50px;
    padding-bottom: 20px;
    background: #fff;
    box-shadow: 1px 1px 2px 2px #e6e6e6;
    border-radius: 6px;
    >.title {
      font-size: 16px;
      color: #666666;
      font-weight:bolder;
      padding: 10px 0;
      padding-left: 15px;
      border-bottom: 1px solid #1ABC9C;
    }
    >.table {
        margin-top:20px;
    }
  }
}
</style>

